<template>
	<view class="container">
		<Navbar url="/pages/home/index" />
		<view class="examination">
			<view class="popup">
				<text @click="toggle">{{ current }}</text>
			</view>
			<view class="popup-info">
				<text>Microeconomice</text>
				<text>Microeconomice</text>
			</view>
			<view class="examination-menu">
				<!-- 使用v-for循环遍历examinations数组，为每个项目创建一个菜单卡片 -->
				<view class="examination-menu-card" v-for="item in examinations" :key="item.id"
					@click="goMenu(item.path)">
					<!-- 显示项目的图片 -->
					<image :src="item.img" mode="widthFix" />
					<!-- 显示项目的标题 -->
					<text>{{ item.title }}</text>
				</view>
			</view>
		</view>
	</view>
	<!-- 顶部弹窗 -->
	<uni-popup ref="popup" mask-background-color="rgba(66, 66, 66, 0.63)">
		<view class="popup-content">
			<view class="popup-content-title">请选择你的体系</view>
			<view class="popup-content-list">
				<text class="popup-content-menu" v-for="item in menus" :key="item.paperId"
					@click="changePoppu(item.paperId,item.paperName)">{{ item.paperName }}</text>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	// 导入组件和函数
	import Navbar from '@/components/Navbar/Navbar.vue';
	import {
		ref
	} from 'vue';
	import {
		navigateTo
	} from '@/utils';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		getExamList
	} from "@/api/exam.js"


	// 引用popup弹窗的ref
	const popup = ref();

	const paperId = ref("")

	// 当前选中的菜单项
	const current = ref('AP');

	const currentValue = ref('');

	// 菜单列表
	//const menus = ref(['AP', 'AL(Cam)', 'AL(Edex)', 'IB(HC)', 'IB(SL)', 'IG(Cam)', 'IG(Edex)']);
	const menus = ref([]);

	// 考试相关选项列表
	const examinations = ref([{
			id: 1,
			title: '题库',
			img: '/static/imgs/examination/Earth.png',
			path: '/pages/examination/answer',
		},
		{
			id: 2,
			title: '错题',
			img: '/static/imgs/examination/Box.png',
			path: '/pages/collection/index',
		},
	]);

	/**
	 * 切换弹出层的显示状态
	 * 无参数
	 * 无返回值
	 */
	const toggle = () => {
		console.log('打开popup');
		popup.value && popup.value.open('top');
	};

	/**
	 * 根据传入值改变当前选中的菜单项，并关闭popup
	 * @param {String} value - 新的当前选中菜单项的值
	 * 无返回值
	 */
	const changePoppu = (value, name) => {
		current.value = name;
		currentValue.value = value
		popup.value && popup.value.close();
	};

	/**
	 * 根据传入的路径跳转到相应页面
	 * @param {String} path - 需要跳转到的页面路径
	 * 无返回值
	 */
	const goMenu = (path) => {
		navigateTo(`${path}?paperId=${currentValue.value}`);
	};

	const getMenuList = () => {
		getExamList(1, 100).then((res) => {
			menus.value = res.rows
			current.value = res.rows[0].paperName
			currentValue.value = res.rows[0].paperId
		})
	}

	onLoad((option) => {
		console.log(option); //打印出上个页面传递的参数。

		paperId.value = option.paperId

		getMenuList()
	})
</script>

<style lang="scss" scoped>
	.examination {
		width: 100%;
		height: 100%;
		padding: 10rpx 40rpx;

		.popup {
			width: 100%;
			height: 120rpx;
			border-bottom: 2px solid #aabfe4;

			text {
				position: relative;
				color: #ffffff;
				font-family: 'PINGFANG-HEAVY';
				font-size: 52.33rpx;
				font-style: normal;
				font-weight: 600;
				line-height: normal;
				letter-spacing: -0.39rpx;
				overflow: hidden;
				word-break: break-all;
				text-overflow: ellipsis;
				white-space: nowrap;
				padding-right: 100rpx;
				cursor: pointer;

				&::after {
					content: '';
					position: absolute;
					top: 0;
					bottom: 0;
					right: 0;
					margin: auto;
					width: 0;
					height: 0;
					border-color: #ffffff transparent transparent;
					border-style: solid;
					border-width: 14rpx;
					transform: translateY(50%);
				}
			}
		}
	}

	.popup-info {
		width: 100%;
		padding: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-evenly;

		text {
			color: rgb(196, 193, 193);
			text-align: center;
			font-family: 'PINGFANG-MEDIUM';
			font-size: 28rpx;
			font-weight: 400;
		}
	}

	.popup-content {
		width: 100%;
		height: auto;
		padding: 40rpx;
		background-color: #000000;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;

		&-title {
			color: #f8f7f7;
			text-align: left;
			font-family: 'PINGFANG-HEAVY';
			font-size: 34.88rpx;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
		}

		&-list {
			width: 100%;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 24rpx 80rpx;
			padding: 20rpx 70rpx;
		}

		&-menu {
			display: inline-block;
			width: 100%;
			height: 72rpx;
			color: #020202;
			text-align: center;
			font-family: 'PINGFANG-HEAVY';
			font-size: 34rpx;
			font-weight: 400;
			line-height: 72rpx;
			background: #b8cef6;
			border-radius: 20rpx;
			cursor: pointer;
		}
	}

	.examination-menu {
		width: 100%;

		&-card {
			width: 100%;
			height: 200rpx;
			border-radius: 20rpx;
			background: #b8cef6;
			display: flex;
			align-items: center;
			padding: 58rpx;
			cursor: pointer;
			// &+.examination-menu-card {
			margin-top: 30rpx;

			// }
			gap: 28rpx;

			image {
				max-width: 82rpx;
			}

			text {
				color: rgb(2, 2, 2);
				font-family: 'PINGFANG-HEAVY';
				font-size: 42rpx;
				font-style: normal;
				font-weight: 400;
				line-height: normal;
			}
		}
	}
</style>